<template>
    <div class="confirmOrderContainer">
        <section v-if="!showLoading">
            <head-top head-title="确认订单" goBack="true" signin-up='confirmOrder'></head-top>
            <div @click="confirm" :to='{path: "/confirmOrder/chooseAddress", query: {id: checkoutData.id, sig: checkoutData.sig}}' class="address_container">
                <div class="address_empty_left">
                    <svg class="location_icon">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#location"></use>
                    </svg>
                    <div class="add_address" v-if="!choosedAddress">请添加一个收货地址</div>
                    <div v-else class="address_detail_container">
                        <header>
                            <span>{{choosedAddress.name}}</span>
                            <span>{{choosedAddress.sex == 1? '先生':'女士'}}</span>
                            <span>{{choosedAddress.phone}}</span>
                        </header>
                        <div class="address_detail">
                            <span v-if="choosedAddress.tag" :style="{backgroundColor: iconColor(choosedAddress.tag)}">{{choosedAddress.tag}}</span>
                            <p>{{choosedAddress.address_detail}}</p>
                        </div>
                    </div>
                </div>
                <svg class="address_empty_right">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                </svg>
            </div>
            <section class="delivery_model container_style">
                <p class="deliver_text">送达时间</p>
                <section class="deliver_time">
                    <p>尽快送达 | 预计 {{checkoutData.duration}}</p>
                    <p>{{checkoutData.deptInfo.deliveryStr}}</p>
                </section>
            </section>
            <section class="pay_way container_style">
                <header class="header_style">
                    <span>支付方式</span>
                    <div class="more_type" @click="showPayWayFun">
                         <span v-for="item in checkoutData.payments" :key="item.id" v-if="payWayId == item.id">
                          {{item.name}}
                        </span>
                        <svg class="address_empty_right">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                        </svg>
                    </div>
                </header>
                <section class="hongbo">
                    <span>红包</span>
                    <span>暂时支持</span>
                </section>
            </section>
            <section class="food_list">
                <header v-if="checkoutData.deptInfo">
                    <img :src="imgBaseUrl + checkoutData.deptInfo.fileList[0].url">
                    <span>{{checkoutData.deptInfo.deptName}}</span>
                </header>
                <ul class="food_list_ul" v-if="checkoutData.groups">
                    <li v-for="item in checkoutData.groups" :key="item.foodId" class="food_item_style">
                      <p class="food_name ellipsis">{{item.name}}{{item.specs?"_"+item.specs:""}}</p>
                        <div class="num_price">
                            <span>x {{item.num}}</span>
                            <span>¥{{item.price}}</span>
                        </div>
                    </li>
                </ul>
               <!-- <div class="food_item_style" v-if="checkoutData.cart.extra">
                    <p class="food_name ellipsis">{{checkoutData.cart.extra[0].name}}</p>
                    <div class="num_price">
                        <span></span>
                        <span>¥ {{checkoutData.cart.extra[0].price}}</span>
                    </div>
                </div>-->
                <div class="food_item_style">
                    <p class="food_name ellipsis">配送费</p>
                    <div class="num_price">
                        <span></span>
                        <span>¥ {{checkoutData.deptInfo.floatDeliveryFee || 0}}</span>
                    </div>
                </div>
                <div class="food_item_style">
                  <p class="food_name ellipsis">包装费</p>
                  <div class="num_price">
                    <span></span>
                    <span>¥ {{checkoutData.packingTotal || 0}}</span>
                  </div>
                </div>
                <div class="food_item_style total_price">
                    <p class="food_name ellipsis">商品 ¥{{checkoutData.foodTotal}}</p>
                    <div class="num_price">
                        <span>待支付 ¥{{checkoutData.orderTotal}}</span>
                    </div>
                </div>
            </section>
            <section class="pay_way container_style">
                <router-link :to='{path: "/confirmOrder/remark", query: {id: checkoutData.id, sig: checkoutData.sig}}' class="header_style">
                    <span>订单备注</span>
                    <div class="more_type">
                        <span class="ellipsis">{{remarkText||inputText? remarklist: '口味、偏好等'}}</span>
                        <svg class="address_empty_right">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                        </svg>
                    </div>
                </router-link>
                <!--<router-link :to="checkoutData.isAvailable? '/confirmOrder/invoice': ''" class="hongbo" :class="{support_is_available: checkoutData.isAvailable}">-->
                    <!--<span>发票抬头</span>-->
                    <!--<span>-->
                        <!--{{checkoutData.statusText}}-->
                        <!--<svg class="address_empty_right">-->
                            <!--<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>-->
                        <!--</svg>-->
                    <!--</span>-->

                <!--</router-link>-->
            </section>
            <section class="confrim_order">
                <p>待支付 ¥{{checkoutData.orderTotal}}</p>
                <p @click="confrimOrder">确认下单</p>
            </section>
            <transition name="fade">
                <div class="cover" v-if="showPayWay" @click="showPayWayFun"></div>
            </transition>
            <transition name="slid_up">
                <div class="choose_type_Container" v-if="showPayWay">
                    <header>支付方式</header>
                    <ul>
                        <li v-for="item in checkoutData.payments" :key="item.id" :class="{choose: payWayId == item.id}" @click="choosePayWay(item.isOnlinePayment, item.id)">
                            <span>{{item.name}}<span v-if="!item.isOnlinePayment">{{item.description}}</span></span>
                            <svg class="address_empty_right">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#select"></use>
                            </svg>
                        </li>
                    </ul>
                </div>
            </transition>
        </section>
        <loading v-if="showLoading"></loading>
        <alert-tip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alert-tip>
        <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script src="./index.js"></script>
<style rel="stylesheet/scss" lang="scss" src="./confirmOrder.scss"></style>
